<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    :title="title"
    width="620"
    show-footer
    show-zoom
    resize
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
    :z-index="2000"
  >
    <template #default>
      <el-form
        ref="formRef"
        :rules="rules"
        :model="form"
        label-align="right"
        label-width="80"
        size="default"
        label-position="lerft"
      >
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="统计时间">
          <el-select class="w-full" v-model="form.type" placeholder="请选择" filterable>
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="text-[#999999]">说明：在统计时间范围内新添加的商品，不参与统计</div>
        </el-form-item>

        <el-form-item label="商品分类">
          <select-category
            class="w-full"
            v-model="form.category"
            :showAllLevels="true"
          ></select-category>
        </el-form-item>

        <el-form-item label="平台/站点">
          <select-platform-site
            v-model:platform="form.platforms"
            v-model:site="form.site"
            platformPlaceholder="推荐平台"
            sitePlaceholder="站点"
          ></select-platform-site>
        </el-form-item>
        <el-form-item label="销量">
          <VGroup>
            <el-select
              class="w-full"
              v-model="form.sales_volume_notation"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in notationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input v-model="form.sales_volume" placeholder="请输入"></el-input>
          </VGroup>
        </el-form-item>
        <el-form-item label="库存">
          <VGroup>
            <el-select
              class="w-full"
              v-model="form.inventory_notation"
              placeholder="请选择"
              filterable
            >
              <el-option
                v-for="item in notationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input v-model="form.inventory" placeholder="请输入"></el-input>
          </VGroup>
          <div class="text-[#999999]">
            统计库存包含：采购在途，中转仓、头程在途、海外仓、平台仓
          </div>
        </el-form-item>
      </el-form>
      <!-- <div class="text-[#999999] text-center">说明：每天凌晨统计一次，修改规则后下次执行时生效</div> -->
    </template>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)"
          >保 存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getClearrulesDetail, saveClearrules, updateClearrules } from "../api/index";
import { reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import SelectCategory from "@/components/SelectCategory";
import SelectPlatformSite from "@/components/SelectPlatformSite";

const visible = ref(false);
const loading = ref(false);
const formRef = ref(null);
const emits = defineEmits(["query"]);

const typeOptions = [
  {
    label: "最近一个月",
    value: 1,
  },
  {
    label: "最近三个月",
    value: 2,
  },
  {
    label: "六个月",
    value: 3,
  },
  {
    label: "一年",
    value: 4,
  },
];

const notationOptions = [
  {
    label: "小于",
    value: "<",
  },
  {
    label: "等于",
    value: "=",
  },
  {
    label: "大于",
    value: "》",
  },
];

const data = reactive({
  form: {},
  title: "新增",
  handleType: null,
  rules: {
    name: [
      {
        required: true,
        message: "请输入规则名称",
        trigger: "blur",
      },
    ],
  },
  load: false,
});
const { form, title, handleType, rules, load } = toRefs(data);

const statusMap = new Map([
  ["add", "新增"],
  ["edit", "编辑"],
  ["view", "查看"],
]);

const open = async (type, id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  title.value = statusMap.get(type);
  handleType.value = type;
  visible.value = true;
  if (id) getDetail(id);
};

const getDetail = async (id) => {
  try {
    const res = await getClearrulesDetail({
      id,
    });
    form.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const save = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      if (form.value.id) {
        updateClearrules(form.value)
          .then((res) => {
            ElMessage.success(res.message);
            emits("query");
            close();
          })
          .finally((e) => {
            loading.value = false;
          });
      } else {
        saveClearrules(form.value)
          .then((res) => {
            ElMessage.success(res.message);
            emits("query");
            close();
          })
          .finally((e) => {
            loading.value = false;
          });
      }
    }
  });
};
const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
}
</style>
